<template>
  <div>

    <div
      style="
        font-size: 18px;
        text-align: left;
        font-weight: bold;
        padding-left: 10px;
        width: 365px;
        height: 270px;
      "
    >
      <div class="container">
        <div class="component"></div>
        <button @click="handleButtonClick" class="white-button">
          <div style="font-size: 16px; white-space: nowrap; text-align: left">
            月累计营业额
          </div>
          <div style="font-size: 32px; white-space: nowrap">
            {{ monthlyRevenue }}<span style="font-size: 16px">元</span>
          </div>
        </button>
        <!-- <button @click="handleButtonClick" class="white-button" id="revenue-button"></button> -->
        <div class="component"></div>
        <div class="home">
          <button @click="handleButtonClick1" class="blue-button">
            <div style="font-size: 16px; white-space: nowrap; text-align: left">
              当日交易额
            </div>
            <div style="font-size: 32px; white-space: nowrap">
              {{ dayRevenue }}<span style="font-size: 16px">元</span>
            </div>
          </button>
          <!-- <button @click="handleButtonClick" class="blue-button">
          <span>交易</span>
          <span>明细</span>
        </button> -->
          <div class="component1"></div>
          <!-- <van-button type="primary">主要按钮</van-button> -->
          <button @click="handleButtonClick2" class="red-button">
            <div style="font-size: 16px; white-space: nowrap; text-align: left">
              当日交易单数
            </div>
            <div style="font-size: 32px; white-space: nowrap">
              {{ daycount }}<span style="font-size: 16px">笔</span>
            </div>
          </button>
        </div>

        <!-- <div class="home" >       -->
        <!-- <van-button plain type="info" @click="showFormHandler">设定目标</van-button>
        <div class="component1"></div>
        <van-button plain type="info">生成报告</van-button>    -->
      </div>
      <div style="display: flex; justify-content: flex-end">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="showFormHandler"
        >
          <template #reference>
            <van-button type="default" size="large">功能选择</van-button>
          </template>
        </van-popover>
      </div>

      <van-form v-if="showForm">
        <van-field
          v-model="goal"
          type="number"
          name="目标"
          label="目标"
          placeholder="目标"
          :rules="[{ required: true, message: '请填写目标' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="handleSubmit"
            >提交</van-button
          >
        </div>
      </van-form>
      <div class="component"></div>
      <div class="component" v-if="showChart"></div>

      <!-- <div id="chart" style="width: 100%; height: 400px;"></div>             -->
      <div ref="chart" id="chart" style="width: 375px; height: 400px"></div>
    </div>
    <van-actionsheet
      v-model="choiceShow"
      :actions="choiceActions"
      cancel-text="取消"
    />
  </div>
</template>






<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import * as echarts from "echarts";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  name: "pieChartRadius",
  props: {
    valBox: Object,
  },

  data() {
    return {
      checked: false,
      choiceShow: true,
      choiceActions: [
        {
          name: "正常模式",
        },
        {
          name: "夜间模式",
        },
      ],
      activeColor: "#409EFF",
      active: 0,
      show: false,
      //  气泡弹出框
      showPopover: false,
      actions: [{ text: "设定目标" }, { text: "生成报告" }],
      // 按钮数据
      year: "",
      month: "",
      totalValue: 0,
      monthlyRevenue: 0, // 初始化为0
      dayRevenue: 0,
      daycount: 0,
      // 百分比图
      showForm: false,
      showChart: false,
      goal: 1,

      // imageSrc: 'E:/knowledge/junior/enterprise/工商/230711前端/file/src/assets/logo2.jpg', // 替换为实际图片的URL
      text: "账户昵称", // 替换为实际的文字内容
      targetValue: 0, // 弹窗输入的value
    };
  },
  // http::113.106.111.75:8081/merchanthome/daily-total?year='+ year +'&month='+month
  computed: {},
  watch: {
    checked(a,b){
      this.checked?this.activeColor = '#354349':this.activeColor = "#409EFF"
    }
  },
  filters: {},
  created() {},
  async mounted() {
    // url:'',
    const currentDate = new Date();
    this.year = currentDate.getFullYear();
    this.month = currentDate.getMonth() + 1; // getMonth()返回的是0-11，所以要加1
    this.day = currentDate.getDate();
    // this.regex = /\d+(\.\d+)?/;
    await this.getData(); //月营业额
    await this.getData1(); //交易额
    await this.getData2(); //交易单数
    await this.getData3(); //年营业额
    await this.getData4(); //目标值
    // this.sendData();
    // this.dataProcessing();
    // this.handleSubmit();
    this.showForm = false;
    // console.log(this.$refs.myForm.fields[0].value); // 输出 goal 值
    // console.log(this.goal); // 输出 goal 值
    // // 获取目标值
    // const goalValue = this.goal;
    // // 创建图表
    // this.chart = echarts.init(document.getElementById('chart'));
    // await this.sendData();
    // this.createchart();
  },
  methods: {
    showModel() {
      alert(1);
      this.choiceShow = true;
    },
    handleButtonClick() {
      this.$router.push("/method");
    },
    handleButtonClick1() {
      this.$router.push("/detail");
    },
    handleButtonClick2() {
      this.$router.push("/compare");
    },
    // 传输数据到数据库
    // async sendData() {
    //   console.log('this.goal',this.goal)
    //   var data = {
    //     id: 1,
    //     target: parseFloat(this.goal) // Convert the target sales to a floating-point number
    //   };

    //   fetch("http://127.0.0.1:8080/merchanthome/yearly-targets", {
    //     method: "POST",
    //     headers: {
    //       "Content-Type": "application/json"
    //     },
    //     body: JSON.stringify(data)
    //   })
    //     .then(response => response.json())
    //     .then(data => console.log(data));
    // },
    // 连接数据库
    // 月累计营业额
    async getData() {
      // const url = "http://127.0.0.1:8080/merchanthome/daily-total?year=2023&month=7&id=1"
      // const url = `http://127.0.0.1:8080/merchanthome/daily-total?year=${this.year}&month=${this.month}&id=1`;
      const url = `http://localhost:8080/merchanthome/daily-total?year=2023&month=7&id=1`;
      console.log("url", url);
      const data = await this.$http.get(url);
      // console.log('data',data.data.data);
      // console.log('data',data.data.data);
      // const datatrans = data.data.data.match(this.regex) ? parseFloat(data.data.data.match(this.regex)[0]):null;
      // this.monthlyRevenue = data.data.toFixed(2);
      // console.log('datatrans',datatrans );
      // this.monthlyRevenue = datatrans;
      this.monthlyRevenue = data.data.data.toFixed(2);
    },
    // 当日交易额
    async getData1() {
      // const url1 = "http://127.0.0.1:8080/merchanthome/daily-sales?year=2023&month=7&id=1"
      // const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales?year=${this.year}&month=${this.month}&id=1`;
      const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales`;
      // console.log(url1)
      const data1 = await this.$http.get(url1);
      // // console.log(data1)
      // const datatrans1 = data1.data.data.match(this.regex) ? parseFloat(data1.data.data.match(this.regex)[0]):null;
      // console.log('datatrans1',datatrans1.toFixed(2));
      // this.dayRevenue = datatrans1.toFixed(2);
      // // this.dayRevenue = data1.data.toFixed(2);
      // // console.log(this.dayRevenue);
      this.dayRevenue = data1.data.data.toFixed(2);
      this.monthlyRevenue =
        parseFloat(this.monthlyRevenue) + parseFloat(this.dayRevenue);
    },
    // 当日交易单数
    async getData2() {
      // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&month=7&id=1"
      // const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=${this.year}&month=${this.month}&day=${this.day}&id=1`;
      const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count`;
      // console.log(url2)
      const data2 = await this.$http.get(url2);
      // const datatrans2 = data2.data.data.match(this.regex) ? parseFloat(data2.data.data.match(this.regex)[0]):null;

      // console.log(data2)
      // console.log('datatrans2',datatrans2.toFixed(2));
      // this.daycount = datatrans2;
      this.daycount = data2.data.data;
    },
    // 年度营业额
    async getData3() {
      // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&id=1"
      // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=${this.year}&id=1`;
      const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=2023&id=1`;
      // console.log(url2)
      const data3 = await this.$http.get(url3);
      // console.log(data2)
      // this.totalValue = data3.data;
      // const datatrans3 = data3.data.data.match(this.regex) ? parseFloat(data3.data.data.match(this.regex)[0]):null;
      // console.log(data3.data)
      // const datatrans3 = data3.data.toFixed(2);
      // // this.totalValue = parseFloat(data3.data)+parseFloat(this.dayRevenue);
      // this.totalValue = datatrans3;
      // // console.log(this.totalValue );
      this.totalValue = data3.data.data;
    },
    // 获取目标值
    async getData4() {
      // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&id=1"
      // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=${this.year}&id=1`;
      const url4 = `http://127.0.0.1:8080/merchanthome/gettarget?id=1`;
      // console.log(url2)
      const data4 = await this.$http.get(url4);
      console.log("data4", data4.data.code);
      this.havedata = data4.data.code;
      if ((this.havadata = 1)) {
        // 获取目标值
        const goalValue = this.goal;
        // 创建图表
        this.chart = echarts.init(document.getElementById("chart"));
        this.goal = data4.data.data;
        this.createchart();
      }
      // const datatrans4 = data3.data.data.match(this.regex) ? parseFloat(data3.data.data.match(this.regex)[0]):null;
      // this.totalValue = parseFloat(data3.data)+parseFloat(this.dayRevenue);
      // this.totalValue = datatrans4;
      // console.log(this.totalValue );
      // console.log()
    },

    // 提交目标
    handleSubmit() {
      this.showForm = false;
      this.showChart = true;
      // console.log(this.$refs.myForm.fields[0].value); // 输出 goal 值
      // console.log(this.goal); // 输出 goal 值
      // // 获取目标值
      // const goalValue = this.goal;
      var data = {
        id: 1,
        target: parseFloat(this.goal), // Convert the target sales to a floating-point number
      };

      fetch("http://127.0.0.1:8080/merchanthome/yearly-targets", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((response) => response.json())
        .then((data) => console.log(data));
      this.createchart();
    },
    createchart() {
      // 获取目标值
      const goalValue = this.goal;
      // 创建图表
      this.chart = echarts.init(document.getElementById("chart"));
      // const chart = echarts.init(document.getElementById('chart'));
      // this.chart.setOption(option);
      // this.chart.setOption({
      //   show: false
      // });
      // 配置图表
      const option = {
        title: {
          text: "年目标营业额完成进度",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          // data: ['A', 'B', 'C', 'D', 'E'],
          show: true,
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            animation: false, // 取消动画
            label: {
              // show: false,
              show: true,
              position: "center",
              // position: 'inner',
              formatter: "{d}%",
              fontSize: 30,
              fontWeight: "bold",
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            //静态已完成数据
            // data: [
            //   { value: 335, name: 'A' },
            //   { value: 310, name: 'B' },
            //   { value: 234, name: 'C' },
            //   { value: 135, name: 'D' },
            //   { value: 1548, name: 'E' },
            // ],
          },
        ],
      };

      // 计算现有静态已完成数据的和
      // this.totalValue = option.series[0].data.reduce((sum, dataItem) => {
      //     return sum + dataItem.value;
      //   }, 0);

      // 数据库数据
      this.getData3();
      console.log(this.totalValue);
      // 更新 data 属性为 goalValue 和现有数据的和
      option.series[0].data = [
        { value: goalValue - this.totalValue, name: "待完成" },
        { value: this.totalValue, name: "已完成" },
      ];
      // // 设置圆环中心的文本
      // option.series[0].label.normal.formatter = function(params) {
      //   return '{d}%\n' + params.seriesName;
      // };

      this.chart.setOption(option);
      // 在这里可以将 goal 值提交到后台进行处理
    },
    onSubmit() {},
    // 表单
    showFormHandler() {
      // Toast(action.text);
      this.showForm = true;
    },
    // onSubmit() {
    //   // 在这里处理表单提交事件
    // },
    // 气泡
    onSelect(action) {
      Toast(action.text);
    },
  },
};
</script>

<style lang="less">
.home {
  display: flex;
  flex-direction: row;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.component {
  margin-bottom: 20px;
}

.component1 {
  margin-right: 10px;
}

.image {
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  margin-right: 10px; /* 设置图片与文字之间的水平间隔 */
}

.text {
  margin-top: 20px;
  font-size: 16px;
  /* color:white; */
  font-weight: bold;
}

.blue-button {
  display: inline-block;
  padding: 30px 30px;
  /* padding: 3rem 4rem; */
  /* margin: 1px; */
  /* margin: 15px 10px 10px 0px; */
  /* margin:0px; */
  /* background-color: rgb(24, 144, 255); */
  color: white;
  border-radius: 5px;
  font-weight: bold;
}
.blue-button:hover {
  /* background-color: darkblue; */
}
.blue-button:active {
  background-color: lightblue;
}

.red-button {
  display: inline-block;
  padding: 30px 30px;
  /* padding: 3rem 4rem; */
  /* margin: 1px; */
  background-color: rgb(255, 77, 79);
  color: white;
  border-radius: 5px;
  font-weight: bold;
}
.red-button:hover {
  background-color: darkred;
}
.red-button:active {
  background-color: lightred;
}

.white-button {
  display: inline-block;
  padding: 30px 90px;
  /* padding: 3rem 10rem; */
  background-color: white;
  border-radius: 5px;
  /* width: 80%; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: bold;
}
.white-button:hover {
  background-color: lightgray;
}
.white-button:active {
  background-color: lightgray;
}

/* 环形图 */
.boxImage {
  padding: 10px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  min-height: 54px;
}
.echartsStyle {
  width: 440px;
  height: 500px;
}
.pieChartRadius {
  position: relative;
  border-top: 0;
  margin-bottom: 30px;
  width: 100%;
  background: #ffffff;
  border-radius: 0;
  padding: 0px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  justify-content: center;
  align-items: center;
}

.pieChartRadius2 {
  /* height: 500px;  */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.nav {
  padding: 30px;
}

.nav a {
  font-weight: bold;
  color: #2c3e50;
}

.nav a.router-link-exact-active {
  /* color: #42b983; */
  color: white;
}



</style>


